<template>
  <el-card class="question-card">
    <div class="card-header">
      <img
        :src="require('@/assets/img/avatar.png')"
        alt="thumbnail"
        class="card-thumbnail"
      />
      <span class="card-title">神秘人</span>
    </div>
    <h3 class="card-content">{{ item.title }}</h3>
    <p class="question-details">{{item.content}}</p>
    <div class="question-time">{{item.tim}}</div>
    <div class="card-footer">
      <div class="card-footer-container">
        <p>{{ item.views }}</p>
        <el-icon>
          <View />
        </el-icon>
      </div>
      <div class="card-footer-container">
        <p>{{ item.comments }}</p>
        <el-icon>
          <Comment />
        </el-icon>
      </div>
      <div
        class="card-footer-container"
        @click.stop="toggleLike(item)"
      >
        <p :style="{ color: item.liked ? 'red' : 'black'}">{{ item.lik }}</p>
        <el-icon :style="{ color: item.liked ? 'red' : 'black' }">
          <Star />
        </el-icon>
      </div>
    </div>
    <el-button
      v-if="!isCommenting"
      style="width: 150px;height: 40px;font-size: 20px"
      color="#a8b4b08f"
      type="comment"
      @click="startCommenting"
    >发评论</el-button>

    <!-- 输入框和上传图片 -->
    <div
      v-if="isCommenting"
      class="comment-box"
    >
      <el-input
        type="textarea"
        v-model="commentText"
        placeholder="请输入评论内容"
        rows="6"
      />
      <div class="comment-actions">
        <el-button
          @click="saveComment"
          type="primary"
        >保存</el-button>
        <el-button
          @click="cancelComment"
          type="text"
        >取消</el-button>
      </div>
    </div>

  </el-card>
</template>

<script>
import { put, post } from "@/net";
import { useAccountStore } from "@/store";
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
export default {
  name: 'questioncarddetail',
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  setup (props, { emit }) {
    const commentText = ref('');
    const isCommenting = ref(false);  // 控制评论框的显示与隐藏
    const store = useAccountStore();
    const toggleLike = (item) => {
      if (!item.liked) {
        item.lik += 1;
        item.liked = true; // 标记为已点赞
      } else {
        item.lik -= 1;
        item.liked = false; // 取消点赞
      }
      put('/question_info/like', { qid: item.id, aid: store.account.id }, (message) => {
        console.log(message.msg);
      });
      post('/message_info/add_message', { receiver_id: item.id, sender_id: store.account.id, tex: "点赞了一条提问", message_type: 1 }, (message) => {
        console.log(message.msg);
      });
    };
    // 发起评论的状态：点击“发评论”按钮后，展开输入框
    const startCommenting = () => {
      isCommenting.value = true;
    };
    // 保存评论
    const saveComment = async () => {
      if (!commentText.value) {
        ElMessage.error('请填写评论内容');
        return;
      }

      const commentData = {
        qid: props.item.id, // 问题 ID
        content: commentText.value,
        cid: store.account.id, // 评论者 ID
        // 可以将图片和其他数据一并上传
        // images: uploadedImages.value // 这里可以根据你的上传图片逻辑处理
      };

      // 调用 API 提交评论数据
      post(
        "/comment_info/add_comment",
        commentData,
        (message) => {
          ElMessage.success('评论成功');
          commentText.value = ''; // 清空评论内容
          isCommenting.value = false; // 隐藏评论框
          emit('commentSaved');  // 触发父组件的 'commentSaved' 事件
        },
        () => {
          ElMessage.error('评论失败，请稍后重试');
        }
      );
      post(
        "/message_info/add_message",
        {
          receiver_id: props.id,
          sender_id: store.account.id,
          tex: "回复了你的消息",
          message_type: 4
        },
        (message) => {
        },
      );
    };
    // 取消评论
    const cancelComment = () => {
      isCommenting.value = false; // 隐藏评论框
      commentText.value = ''; // 清空输入框内容
    };
    return {
      toggleLike, commentText, isCommenting, startCommenting, saveComment, cancelComment
    };
  }
};
</script>

<style scoped>
.question-card {
  width: 100%;
  min-width: 100%;
  min-height: 150px;
  height: auto;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin: 10px 0;
  box-shadow: var(--color-post-card-box-shadow) 0 3px 8px;
  transition: all 0.5s;
}

.card-header {
  --userImage: 50px;
  width: 100%;
  height: 30px;
  margin-right: auto;
  margin-top: 15px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 700;
}

.card-thumbnail {
  width: 30px;
  height: 30px;
  object-fit: cover;
  margin-right: 8px;
}

.card-title {
  font-size: 1.2em;
  font-weight: bold;
}

.card-content {
  margin: 0px;
}

.question-details {
  font-size: 20px;
  color: #666;
  overflow: hidden;
}

.question-time {
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}

.card-footer-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 4px; /* 控制文字和图标之间的间距 */
  font-size: 20px; /* 设置整体字体大小 */
}

.card-footer-container p {
  font-size: inherit; /* 文字大小继承父容器 */
  color: #666; /* 可选，设置文字颜色 */
}

.card-footer-container el-icon {
  font-size: inherit; /* 图标大小继承父容器 */
  color: #666; /* 可选，设置图标颜色 */
}

.card-footer-container p {
  margin: 0; /* 去掉默认的段落外边距 */
}

.card-footer-container el-icon {
  transition: color 0.3s ease; /* 添加平滑过渡效果 */
}

.card-footer {
  display: flex;
  justify-content: space-around;
  /* margin-top: 10px; */
  margin: 0;
}
</style>